import { useEditorStore } from '@/store/editor';
import { FC } from 'react';
import LayerItem from './LayerItem';
import DragContainer from '@/components/drag/DragContainer';
import DragItem from '@/components/drag/DragItem';

const Layer: FC = (props) => {
  const { componentList, dragMove } = useEditorStore();
  // <DragContainer/> 的 items 属性需要每个 item 都有 id
  const items = componentList.map((item) => {
    return {
      ...item,
      id: item.fe_id!,
    };
  });

  function onDragEnd(oldIndex: number, newIndex: number) {
    dragMove(oldIndex, newIndex);
  }

  const list = componentList.map((info) => (
    <DragItem id={info.fe_id!} key={info.fe_id}>
      <LayerItem info={info} />
    </DragItem>
  ));

  return (
    <DragContainer onDragEnd={onDragEnd} items={items}>
      {list}
    </DragContainer>
  );
};

export default Layer;
